import React from 'react'
import { Menu, Icon } from 'antd'
import { NavLink } from 'react-router-dom'
import menuConfig from '../../config/menuConfig'
import './index.less'

const SubMenu = Menu.SubMenu;

export default class NavLeft extends React.Component{

  componentWillMount() {
    const menuTreeNode = this.renderMenu(menuConfig)

    this.setState({ 
      menuTreeNode
    })
  }
  // 递归函数实现菜单渲染
  renderMenu = (data) => {
    return data.map(item => {
      if (item.children) {
        return (
          <SubMenu title={<span><Icon type="setting" /><span>{item.title}</span></span>} key={item.key}>
            {this.renderMenu(item.children)}
          </SubMenu>
        )
      }
      return (
        <Menu.Item title={item.title} key={item.key} >
          <NavLink to={item.key}>{item.title}</NavLink>
        </Menu.Item>
      )
    })
  }

  render() {
    return (
      <div>
        <div className="logo">
          <img src="/logo.png" alt=""/>
          <h1>React-Demo</h1>
        </div>

        <Menu mode="inline" theme="dark">
          {this.state.menuTreeNode}
        </Menu>
      </div>
    )
  }
}